<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 100%;
            height: 100%;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .box .cen{
            width: 1802px;
            height: 902px;
            border: 1px solid black;
            margin: 15px auto;
        }
        .box .cen .zuo{
            width: 900px;
            height: 900px;
            padding: 100px;
            border: 1px solid black;
        }
        .box .cen .zuo .yang{
            width: 100px;
            height: 100px;
        }
        .center{
            margin: 0 auto;
        }
        .regulator{
            width: 400px;
            height: 50px;
        }
        .word{
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
        }
        .centerge{
            width: 500px;
            height: 50px;
        }
        .box .cen .you{
            width: 900px;
            height: 900px;
            border: 1px solid black;
        }
        hr{
            margin: 50px auto;
        }
        button{
            width: 300px;
            height: 50px;
            border: none;
            cursor: pointer;
            background-color: rgb(22, 162, 255);
            color: #fff;
            margin: 20px auto;
        }
        .buju{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-content: space-around;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cen">
            <div class="zuo left">
                <div>
                    <div class="center centerge">
                        <div class="word left">画笔大小:</div> 
                        <input class="size regulator"  data-name="size" type="range" min="0" max="100" value="5" />
                    </div>
                    <div class="yang center"></div>
                    <div class="center centerge"> 
                        <div class="word left">R: </div>
                        <input class="range regulator" data-name="r" type="range" min="0" max="255" value="0" />
                    </div>
                    <div class="center centerge">
                        <div class="word left"> G: </div>
                        <input class="range regulator" data-name="g" type="range" min="0" max="255" value="0" />
                    </div>
                    <div class="center centerge">
                        <div class="word left"> B: </div>
                        <input class="range regulator" data-name="b" type="range" min="0" max="255" value="0" />
                    </div>
                    <div class="center centerge">
                        <div class="word left"> 透明度::</div>
                        <input class="range regulator" data-name="a" type="range" min="0" max="100" value="100" />
                    </div>
                </div>
                <hr>
                <div class="buju">
                    <button class="preservation">保存</button>
                    <button class="dalata">清空</button>
                    <button class="reBack">撤回</button>
                    <button class="repeat">恢复</button>
                    <button class="SharpCorner">属性:圆滑</button>
                    <button class="BrushEnd">末端:默认</button>
                </div>
            </div>
            <div class="you right">
                <canvas class="canvas-box" id="canvas" width="900" height="900"></canvas>
            </div>
        </div>
    </div>
</body>
<!-- <script src="./jquery-3.6.0.min.js"></script> -->
<script>

    window.onload = function () {
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //颜色区域




        //获取.yang
        let box = document.querySelector('.yang');
        //获取所有.range
        let ranges = document.querySelectorAll('.range');
        let rgba = {
            r: '',
            g: '',
            b: '',
            a: ''
        };
        ranges.forEach(function (ele) {
            //获取初始化的色值
            let v = ele.value;
            console.log('v ==> ', v);
            //获取当前input的data-name
            let dataName = ele.dataset.name;
            // console.log('dataName ==> ', dataName);
            rgba[dataName] = v;
            //绑定oninput事件
            ele.oninput = function () {
            let currentDataName = this.dataset.name;
            rgba[currentDataName] = this.value;
            setBoxBg(rgba);
            setlinColor(rgba);
            }
        })
        // console.log('rgba ==> ', rgba);
        //初始化.box背景色
        setBoxBg(rgba);
        function setBoxBg(rgba) {
            box.style.backgroundColor = 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a / 100 + ')';
        }

        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //写字功能

        let canvas = document.getElementById('canvas');
        let context = canvas.getContext("2d");
        let isDraw = false; //定义变量控制画笔是否可用
        let movePos;         //定义变量存放初始画笔开始位置
        let wordsize = document.querySelector('.size');
        let linWidth = wordsize.value;
        let linColor = '#333';




        //画笔类型
        let lineJoin = 'round';
        // 一共有三种属性值 round(尖角处圆滑处理)  bevel(斜角处理，产生类似于折叠的效果) miter(尖角处尖锐化，也是默认效果)
        let lineCap = "butt"
        // 一共有三种属性值 round(在线条末端添加圆形线帽) butt(默认样式) square(在线条末端添加方形线帽)
        let SharpCorner = document.querySelector('.SharpCorner');
        SharpCorner.onclick = function () {
            console.log('点击触发了');
            if (lineJoin == 'round') {
                lineJoin = 'bevel';
                SharpCorner.innerHTML = '属性:斜角';
            }else if (lineJoin == 'bevel') {
                lineJoin = 'miter';
                SharpCorner.innerHTML = '属性:锐化';
            }else{
                lineJoin = 'round';
                SharpCorner.innerHTML = '属性:圆滑';
            }
            drawing();
        }
        let BrushEnd = document.querySelector('.BrushEnd');
        BrushEnd.onclick = function () {
            console.log('点击触发了');
            if (lineCap == 'butt') {
                lineCap = 'round';
                BrushEnd.innerHTML = '末端:圆形线帽';
            }else if (lineCap == 'round') {
                lineCap = 'square';
                BrushEnd.innerHTML = '末端:方形线帽';
            }else{
                lineCap = 'butt';
                BrushEnd.innerHTML = '末端:默认';
            }
            drawing();
        }






        context.beginPath();
        //获取鼠标相对与canvas位置
        function getPos(x,y){
            var box = canvas.getBoundingClientRect();
            return {x: x-box.left,y: y-box.top};
        };
        //画笔
        function drawing(e){
            if(isDraw){
                var position = getPos(e.clientX,e.clientY);
                context.strokeStyle = linColor;
                context.lineWidth = linWidth;
                context.lineJoin = lineJoin;
                console.log(context.lineJoin);
                context.lineCap = lineCap;
                console.log(context.lineCap);
                context.save();
                context.beginPath();
                context.moveTo(movePos.x,movePos.y);
                context.lineTo(position.x,position.y);
                context.stroke();
                movePos = position;
                // context.restore();
            }
        }
        //选择画笔颜色
        setlinColor(rgba);
        function setlinColor(rgba) {
            linColor = 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a / 100 + ')';
        }
        //选择画笔大小
        wordsize.oninput = function () {
            let wordsize = document.querySelector('.size');
            wordsize = wordsize.value;
            console.log(wordsize);
            linWidthword(wordsize);
        }
        function linWidthword(ele) {
            linWidth = ele;
        }
        //鼠标点下
        canvas.onmousedown = function(e){
            repeat.length = 0
            isDraw = true;
            movePos = getPos(e.clientX,e.clientY);
            drawing(e);
        }
        //鼠标移动
        canvas.onmousemove = function(e){
            drawing(e);
        }
        //鼠标松开
        canvas.onmouseup = function(e){
            isDraw = false;
            //记录
            restore[restore.length] = context.getImageData(0, 0, 900, 900)
        }
        //鼠标离开
        canvas.onmouseout =function(e){
            isDraw = false;
        }

        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        //清除
        let dalata = document.querySelector('.dalata');
        dalata.onclick = function () {
            context.clearRect(0, 0, 900, 900)
            restore[restore.length] = context.getImageData(0, 0, 900, 900)
        }

        //保存


        //保存下载图片
        let preservation = document.querySelector('.preservation');
        function downLoadImage(canvas,name) {
            let a = document.createElement("a");
            a.href = canvas.toDataURL();
            a.download = name;
            a.click();
        }
        preservation.onclick = function () {
            let canvas = document.getElementById('canvas');
            let context = canvas.getContext("2d");
            downLoadImage(canvas,1);
        }
        //撤回
        let reBack = document.querySelector('.reBack');
        let restore = [context.getImageData(0, 0, 900, 900)];
        let repeat = [];
        reBack.onclick = function() {
            if (restore.length > 1) {
                repeat[repeat.length] = restore[restore.length - 1]
                context.putImageData(restore[restore.length - 2], 0, 0)
                restore.length--;
            }
        }
        //恢复
        document.querySelector('.repeat').onclick = function() {
            if (repeat.length > 0) {
                context.putImageData(repeat[repeat.length - 1], 0, 0)
                restore[restore.length] = repeat[repeat.length - 1]
                repeat.length--
            }
        }





    }

  </script>
</html>